<template>
	<view>
		<view class="search-ctn">
			<view class="u-flex search-box">
				<view class="u-flex m-flex-no u-flex-y-center" @click="regionShow = true">
					<u-icon name="dingwei" customPrefix="master" size="18" color="#333"></u-icon>
					<view class="u-m-l-20">{{ nameCity ? nameCity : cityName }}</view>
					<u-line class="u-line" direction="col" margin="0 0 0 20rpx"></u-line>
				</view>
				<u-search v-if="searchStatus" placeholder="你想找哪里呢？" height="40" bg-color="transparent" v-model="keyword"
					:show-action="false" @change="$u.debounce(input_blur, 500)"></u-search>
				<u-search v-else placeholder="你想找哪里呢？" height="40" bg-color="transparent" :show-action="false"
					@click="nextNav('/pages/room/search?type='+types)" :disabled="true"></u-search>
			</view>
			<view class="m-bg-w boxheight u-m-t-20" v-if="bool">
				<view class="m-mg-lr">
					<view class="m-mg-lr u-flex u-flex-between boxrow">
						<view class="u-flex" v-for="(item,index) in list" :key='index'
							@click="requestStatus?gettabClick(index):''">
							<view>
								<text class="u-font-24" :class="cut === index ? 'ch' : 'c5'">{{item.name}}</text>
							</view>
							<view class="u-m-t-8 u-m-l-10">
								<u-icon :name='item.icon' size='12' color='#cecccc'></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="regionShow" keyName="name" :columns="[getcity]" @cancel="regionShow = false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		name: 'search-box',
		data() {
			return {
				regionShow: false,
				city: '',
				list: [{
						name: '区域',
						icon: 'arrow-down-fill'
					},
					{
						name: '价格',
						icon: 'arrow-down-fill'
					},
					{
						name: '房型',
						icon: 'arrow-down-fill'
					},
					{
						name: '更多',
						icon: 'arrow-down-fill'
					},
					// {
					// 	name: '排序',
					// 	icon: 'arrow-down-fill'
					// }
				],
				cut: 0,
				nameCity: ''
			};
		},
		props: {
			searchStatus: {
				type: Boolean,
				default: false
			},
			cityName: {
				type: String,
				default: ''
			},
			getcity:{
				type: Array,
				default: () => []
			},
			bool:{
				type:Boolean,
				default:false
			},
			types:{
				type:Number,
				default: 0
			}
		},
		methods: {
			input_blur() {
				this.$emit('search', this.keyword);
			},
			async confirm(e) {
				this.city = e.value[0].name;
				this.nameCity = e.value[0].name;
				this.$emit('confirm',e.value[0].name);
				this.regionShow = false;
			},
			gettabClick(index){
				this.cut = index;
				this.$emit('gettabClick',index);
			}
		}
	};
</script>

<style lang="scss">
	.search-ctn {
		background-color: #fff;
		position: fixed;
		z-index: 10076;
		width: 750rpx;
		padding: 20rpx;
		top: 0
	}

	.search-box {
		background-color: #f6f6f6;
		border-radius: 50rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
	}
	
	.c5 {
		color: #5A5A5A;
	}
	
	.ch {
		color: #DBB07B;
	}
</style>
